<!DOCTYPE html>
<html>
<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
	<title>Em calc</title>
	<style type="text/css">
		select, input {
			font-size: 16px;
		}
		.sample_text {
			height: 20px;
			min-width: 200px;
		}
		.calc_wrapper {
			font-family: Arial;
		}

		.display_box, .base_value_wrapper, select, .sample_text {
			border: 4px solid rgba(245, 195, 107, 0.23);
			margin: 5px 5px 5px 30px;
			-webkit-border-radius: 10px;
		}
		
		.box {
			padding: 0px 20px 5px 20px;

		}

		.box a.close {
			float: right;
			top: 10px;
			right: 10px;
		}

		.box input {
			font-size: 16px !important;
			font-size: 18px;
			padding: 3px;
			text-align: right;
			width: 50px;
		}

		.box span {
			font-size: 16px;
		}

		.box a {
			background-color: rgba(243, 208, 134, 0.19);
			border: 4px solid rgba(245, 195, 107, 0.23);
			display: inline-block;
			font-size: 16px !important;
			padding: 5px 3px;
			-webkit-border-radius: 10px;
		}

		.box .example {
			display: block;
			height: 30px;
			line-height: 1em;
			margin: 0px;
			overflow: hidden;
			padding-top: 23px;
			width: 300px;
		}
	</style>

</head>
<body>
	<select class="font_list">
		<option value="Arial, Helvetica, sans-serif">Arial</option>
		<option value='"Arial Black", Gadget, sans-serif'>Arial Black</option>
		<option value='"Comic Sans MS", cursive, sans-serif'>Comic sans</option>
		<option value='Impact, Charcoal, sans-serif'>Impact</option>
		<option value='"Lucida Sans Unicode", "Lucida Grande", sans-serif'>Lucida</option>
		<option value='Tahoma, Geneva, sans-serif'>Tahoma</option>
		<option value='"Trebuchet MS", Helvetica, sans-serif'>Trebuchet</option>
		<option value='Verdana, Geneva, sans-serif'>Verdana</option>
		<option value='Georgia, serif'>Georgia</option>
		<option value='"Palatino Linotype", "Book Antiqua", Palatino, serif'>Palatino Linotype</option>
		<option value='"Times New Roman", Times, serif'>Times new roman</option>
		<option value='"Courier New", Courier, monospace'>Courier New</option>
		<option value='"Lucida Console", Monaco, monospace'>Lucida Console</option>
	</select>
	<input class="sample_text" value="What does the fox say?" onfocus="this.value='';"  />
	<div class="calc_wrapper">
		<div class="base_value_wrapper box calc_display">
		 	<h3>Page/base value</h3>
			<input class="base_value" value="16" />
			<a class="insert_base" href="#">Calculate</a>
		
			<div class="display_box box">
				<h3 class="example">What does the fox say?</h3>
				<a href="#" class="close">X</a>
				<input class="value_to_calculate" /><span>px </span><input class="result" readonly="readonly"/><span>em </span>
				<a href="#" class="calculate">Calculate</a>
				<br />
				<a href="#" class="inside">Inside</a>
				<a href="#" class="outside">Outside</a>
			</div>
		</div>
	</div>

	<div>
		<p>
			by Aleksandar Perc
		</p>
	</div>
</body>
<script type="text/javascript">
	$(document).ready(function() {
		var baseValue = 16;

		$('.font_list').change(function(e) {
			/*
				when the user selects another font, make the change accross the document
			*/
			$('.calc_wrapper h3').css('font-family', $(this).val());
		});

		$('.sample_text').keypress(function() {
			/*
				when the user types the new text, change it accross the document while he types
			*/
			$('.box h3').text($(this).val());
		});

		$('.box').on('focus','.result', function(e) {
			/*
				the input field is read only so the user don't get confused where to type the value
				this code removes readonly and selects the text so the user don't have to doubleclick (doubleclicking is not a common thing on the web)
			*/
			e.stopPropagation();
			e.preventDefault();
			$(this).attr('readonly', false);
			$(this).select();
		});

		$('.box').on('focusout', '.result', function() {
			/*
				when the user have copied the text and leaves the field, return readonly value
			*/
			$('.result').attr('readonly', true);
		});

		$('.calc_display').on('click', '.inside', function(e){
			/*
				this copies the selected element and append it to itself (it has his own child now)
			*/
			e.preventDefault();
			e.stopPropagation();
			var clonedElement = $(this).parent().clone().addClass('insider');
			$(this).parent().append(clonedElement);
			
			readFontSizes();
		});

		$('.calc_display').on('click', '.outside', function(e){
			/*
				this copies the current element and appends it to an outer element
			*/
			e.preventDefault();
			e.stopPropagation();
			$(this).parent().parent().append($(this).parent().clone());
			
			readFontSizes();
		});

		$('.base_value_wrapper').on('click', '.insert_base', function(e) {
			/*
				takes the base value (top of window) and stores it in a variable
			*/
			e.preventDefault();
			e.stopPropagation();
			setBase();
			readFontSizes();
		});

		$('div').on('click', '.calculate', function(e) {
			/*
				this calls readFontSize function each time the calculate button is pressed, BUT not the base value calculate button
			*/
			e.preventDefault();
			e.stopPropagation();

			readFontSizes();
		});

		$('.box').on('click', '.close', function() {
			/*
				removes the selected box from the tree
			*/
			$(this).parent().remove();
		});
	});

		function setBase(){
			/*
				sets the base value for the document
			*/
			baseValue = parseInt($('.base_value').val(), 10);
			$('.calc_wrapper').css('font-size', baseValue);
		}
		
		function readFontSizes() {
			/*
				this function takes all the elements and sets/calculates the appropriate value for each element
			*/
				setBase();

			$('input.value_to_calculate').each(function(inputValue) {
				var boxParent = $(this).parents(':eq(1)');// the second parent, so i don't use parent().parent()....
				var elementWrapper = $(this).parent();

				var parentsInput = boxParent.find('input').val();// parents element value
				var pixelsInput = elementWrapper.find('input').val();// this elements value

				if ($(boxParent).hasClass('base_value_wrapper')) {
					parentsInput = window.baseValue;// if it turns out that the parent element is the same as Page/base value...
				};
				
				elementWrapper.find('.result').val(pixelsInput / parentsInput);// put the value to the element

				// change result text to calculated value
				$(this).siblings('.example').css('font-size', (pixelsInput / parentsInput)+'em');
			});
		}

	</script>
</html>